<!-- 反馈管理页面 -->
<template>
  <view class="feedback-admin-page">
    <view class="admin-header">
      <button class="back-btn" @tap="goBack">← 返回</button>
      <text class="header-title">反馈管理</text>
    </view>
    
    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stats-card">
        <text class="stats-number">{{ stats.total || 0 }}</text>
        <text class="stats-label">总反馈</text>
      </view>
      <view class="stats-card pending">
        <text class="stats-number">{{ stats.pending || 0 }}</text>
        <text class="stats-label">待处理</text>
      </view>
      <view class="stats-card processing">
        <text class="stats-number">{{ stats.processing || 0 }}</text>
        <text class="stats-label">处理中</text>
      </view>
      <view class="stats-card resolved">
        <text class="stats-number">{{ stats.resolved || 0 }}</text>
        <text class="stats-label">已解决</text>
      </view>
    </view>

    <!-- 筛选器 -->
    <view class="filter-section">
      <picker :range="statusOptions" :value="statusFilterIndex" @change="onStatusFilterChange">
        <view class="filter-picker">
          {{ statusFilterIndex === -1 ? '全部状态' : statusOptions[statusFilterIndex] }}
        </view>
      </picker>
      <button class="refresh-btn" @tap="loadFeedbackList">刷新</button>
    </view>

    <!-- 反馈列表 -->
    <view class="feedback-list">
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="feedbackList.length === 0" class="empty-state">
        暂无反馈数据
      </view>
      <view v-else>
        <view v-for="feedback in feedbackList" :key="feedback.id" class="feedback-item">
          <view class="feedback-header">
            <text class="feedback-type">{{ getTypeText(feedback.type) }}</text>
            <text class="feedback-status" :class="getStatusClass(feedback.status)">
              {{ getStatusText(feedback.status) }}
            </text>
          </view>
          <view class="feedback-content">{{ feedback.content }}</view>
          <view v-if="feedback.contact" class="feedback-contact">
            联系方式: {{ feedback.contact }}
          </view>
          <view v-if="feedback.images && feedback.images !== '[]'" class="feedback-images">
            <image 
              v-for="(img, idx) in parseImages(feedback.images)" 
              :key="idx" 
              :src="img" 
              mode="aspectFill" 
              class="feedback-image"
              @tap="previewImage(parseImages(feedback.images), idx)"
            />
          </view>
          <view class="feedback-footer">
            <text class="feedback-time">{{ formatTime(feedback.createTime) }}</text>
            <view class="feedback-actions">
              <button 
                v-if="feedback.status === 0" 
                class="action-btn processing" 
                @tap="updateStatus(feedback.id, 1)"
              >
                开始处理
              </button>
              <button 
                v-if="feedback.status === 1" 
                class="action-btn resolved" 
                @tap="updateStatus(feedback.id, 2)"
              >
                标记解决
              </button>
              <button 
                class="action-btn delete" 
                @tap="deleteFeedback(feedback.id)"
              >
                删除
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { request } from '@/utils/request';

const loading = ref(false);
const feedbackList = ref([]);
const stats = ref({});
const statusFilterIndex = ref(-1);
const statusOptions = ['全部', '待处理', '处理中', '已解决'];

// 获取反馈列表
const loadFeedbackList = async () => {
  loading.value = true;
  try {
    let url = '/feedback/list';
    if (statusFilterIndex.value >= 0) {
      url = `/feedback/status/${statusFilterIndex.value}`;
    }
    
    const response = await request({
      url: url,
      method: 'GET'
    });
    
    if (response.code === 200) {
      feedbackList.value = response.data || [];
    }
  } catch (error) {
    console.error('获取反馈列表失败:', error);
    uni.showToast({ title: '获取数据失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

// 获取统计信息
const loadStats = async () => {
  try {
    const response = await request({
      url: '/feedback/stats',
      method: 'GET'
    });
    
    if (response.code === 200) {
      stats.value = response.data || {};
    }
  } catch (error) {
    console.error('获取统计信息失败:', error);
  }
};

// 更新反馈状态
const updateStatus = async (id, status) => {
  try {
    const response = await request({
      url: `/feedback/${id}/status?status=${status}`,
      method: 'PUT'
    });
    
    if (response.code === 200) {
      uni.showToast({ title: '状态更新成功', icon: 'none' });
      loadFeedbackList();
      loadStats();
    }
  } catch (error) {
    console.error('更新状态失败:', error);
    uni.showToast({ title: '更新失败', icon: 'none' });
  }
};

// 删除反馈
const deleteFeedback = async (id) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条反馈吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          const response = await request({
            url: `/feedback/${id}`,
            method: 'DELETE'
          });
          
          if (response.code === 200) {
            uni.showToast({ title: '删除成功', icon: 'none' });
            loadFeedbackList();
            loadStats();
          }
        } catch (error) {
          console.error('删除失败:', error);
          uni.showToast({ title: '删除失败', icon: 'none' });
        }
      }
    }
  });
};

// 状态筛选变化
const onStatusFilterChange = (e) => {
  statusFilterIndex.value = Number(e.detail.value);
  loadFeedbackList();
};

// 工具函数
const getTypeText = (type) => {
  const typeMap = {
    'bug': 'BUG反馈',
    'feature': '功能建议',
    'ui': '界面问题',
    'performance': '性能问题',
    'other': '其他'
  };
  return typeMap[type] || type;
};

const getStatusText = (status) => {
  const statusMap = {
    0: '待处理',
    1: '处理中',
    2: '已解决'
  };
  return statusMap[status] || '未知';
};

const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    1: 'status-processing',
    2: 'status-resolved'
  };
  return classMap[status] || '';
};

const parseImages = (imagesJson) => {
  try {
    return JSON.parse(imagesJson);
  } catch (e) {
    return [];
  }
};

const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN');
};

const previewImage = (images, current) => {
  uni.previewImage({
    urls: images,
    current: current
  });
};

const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  loadFeedbackList();
  loadStats();
});
</script>

<style scoped>
.feedback-admin-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0 1rem 2rem 1rem;
}

.admin-header {
  width: 100%;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 0 1rem 0;
  background: #1890FF;
  border-radius: 0 0 20px 20px;
  color: #fff;
  font-weight: bold;
  padding: 0 1rem;
}

.back-btn {
  position: absolute;
  left: 0.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.stats-section {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stats-card {
  flex: 1;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-number {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #1890FF;
}

.stats-label {
  font-size: 0.8rem;
  color: #666;
}

.pending .stats-number { color: #ff9500; }
.processing .stats-number { color: #007aff; }
.resolved .stats-number { color: #34c759; }

.filter-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-picker {
  flex: 1;
  padding: 0.5rem;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}

.refresh-btn {
  padding: 0.5rem 1rem;
  background: #1890FF;
  color: #fff;
  border: none;
  border-radius: 8px;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feedback-item {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.feedback-type {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.feedback-status {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.status-pending {
  background: #fff3e0;
  color: #f57c00;
}

.status-processing {
  background: #e3f2fd;
  color: #1976d2;
}

.status-resolved {
  background: #e8f5e8;
  color: #388e3c;
}

.feedback-content {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.feedback-contact {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.feedback-images {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.feedback-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.feedback-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-time {
  font-size: 0.8rem;
  color: #999;
}

.feedback-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}

.action-btn.processing {
  background: #007aff;
  color: #fff;
}

.action-btn.resolved {
  background: #34c759;
  color: #fff;
}

.action-btn.delete {
  background: #ff3b30;
  color: #fff;
}

.loading, .empty-state {
  text-align: center;
  padding: 2rem;
  color: #666;
}
</style>
